<template>
  <div id="main" :style="{ backgroundImage: `url(${backgroundimg})` }">
      <div class="title">
        <span>Album</span>
      </div>
      <div class="back" @click="leftClick()">
        <el-button icon="el-icon-back" >Back to home</el-button>
      </div>
      <ImgItem />
      <Blogup/>
  </div>
</template>

<script>
import ImgItem from "./components/ImgItem.vue";
import Blogup from "../Blog/components/Blogup"
export default {
  name: "Album",
  components: {
    ImgItem,
    Blogup
  },
  data() {
    return {
      backgroundimg: require("@/assets/xc3.jpg"),
    };
  },
  methods: {
    // 左点击返回主页
    leftClick() {
      console.log("返回主页");
      this.$router.push({ path: "/home" });
    },
  },
};
</script>

<style lang="less" scoped>
#main {
  position: relative;
  min-height: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.title{
  text-align: center;
  padding: 10px;
  font-size: 16px;
  color: aliceblue;
  font-family: STLiti;
}
.back{
  position: fixed;
  margin-top: -30px;
  z-index: 1;
}
.el-button {
  background:transparent;
  color: rgb(253, 253, 253);
  width: 60px;
  height: 5px;
  font-size: 5px;
  padding: 7px 10px;
}
</style>